<template>
  <div className="right-panel">
    <div v-if="component">
      <h3>组件属性</h3>
      <div className="form-item">
        <label>宽度:</label>
        <input v-model="component.width" @input="updateComponent">
      </div>
      <div className="form-item">
        <label>高度:</label>
        <input v-model="component.height" @input="updateComponent">
      </div>
      <div className="form-item">
        <label>背景颜色:</label>
        <input v-model="component.backgroundColor" type="color" @input="updateComponent">
      </div>
      <div v-if="component.name === 'Input'" className="form-item">
        <label>文字颜色:</label>
        <input v-model="component.color" type="color" @input="updateComponent">
      </div>
      <div v-if="component.name === 'Input'" className="form-item">
        <label>占位符:</label>
        <input v-model="component.placeholder" @input="updateComponent">
      </div>
    </div>
    <div v-else>
      <p>请选择一个组件</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['component'],
  methods: {
    updateComponent() {
      // 获取设计区域的最大宽度和高度
      const designAreaWidth = this.$parent.$refs.designArea.offsetWidth;
      const designAreaHeight = this.$parent.$refs.designArea.offsetHeight;

      // 限制组件的宽高不能超过设计区域的宽高
      if (parseInt(this.component.width) > designAreaWidth) {
        this.component.width = `${designAreaWidth}px`;
      }
      if (parseInt(this.component.height) > designAreaHeight) {
        this.component.height = `${designAreaHeight}px`;
      }

      this.$emit('update-component', this.component);
    }
  }
};
</script>

<style scoped>
.right-panel {
  width: 200px;
  padding: 10px;
  border-left: 1px solid #ddd;
}

.form-item {
  margin-bottom: 10px;
}

.form-item label {
  margin-right: 10px;
}
</style>
